<template>
	<view class="coupList_block">
		<view 
		@click="detail(item)"
		v-for="(item,index) in couponList"
		:key="index"
		class="coupList_item flex_zhcenter">
			<image class="bgColorRed" mode="aspectFill" 
			:src="item.imgBg"></image>
			<view class="item-wrap-content text_colorRed" :class="[item.className]">
			  <view class="amount overfHidden">
			    <view class="unit">￥</view>
			    <view class="money txt-ellipsis">{{item.couponMoney || 0}}</view>
			  </view>
			  <view class="text overfHidden">
			    <view class="couponName txt-ellipsis">{{item.title || ''}}</view>
			    <view class="couponDate txt-ellipsis">有效期至{{item.endDate || ''}}</view>
			  </view>
			</view>
		</view>
	</view>
</template>

<script>
	import coupReceive from '@/components/coup-receive/index.vue';
	import  { configApi } from '@/commApi/config.js'
	const COUPON_IMAGE_BG = {
		'1': configApi.qiNiuImg + '/images/coupon/coupon_bg_01.png', // 红色优惠券背景
		'2': configApi.qiNiuImg + '/images/coupon/coupon_bg_02.png', // 蓝色
		'0': configApi.qiNiuImg + '/images/coupon/coupon_bg_03.png' // 灰色，代表禁用
	}
	const COUPON_CLASS = {
	  '1': 'text_colorRed', // 红色优惠券背景
	  '2': 'text_colorBlue', // 蓝色
	  '0': 'text_colorGrey'
	}
	const COUPON_TITLE = {
	  '1': '停车满减券',
	  '2': '月卡抵扣券',
	  '8-2': '停车抵用券'
	}
	export default {
	  name: "index",
	  components: {
	    coupReceive
	  },
		props: {
			coupon: {//优惠券数据
				type: [Array],
				default:()=>{
					return []
				}
			},
			useless: {//是否时过期券 0未使用 1已过期
				type: [Number],
				default:()=>{
					return 0
				}
			},
		},
		watch:{
			coupon(val){
				console.log(val)
				// useType 1停车费抵扣红包 2月卡费用抵扣红包
				this.couponList = this.getList(val)
				
			}
		},
	  data() {
	    return {
				couponList:[],
	    };
	  },
	  mounted() {
	    this.couponList = this.getList(this.coupon)
	  },
	  methods: {
			//详情
			detail(e){
				this.$emit('detail',e)
			},
			getList(val){
				let list = val.map(info=>{
					info.imgBg = this.useless == 1 ? COUPON_IMAGE_BG[0] : COUPON_IMAGE_BG[info.useType]
					info.className = this.useless == 1 ? COUPON_CLASS[0] : COUPON_CLASS[info.useType]
					info.title = COUPON_TITLE[info.useType]
					if (info.useType === 1 && info.sourceType === 8 && info.merchantCouponType === 2) {
						info.title = COUPON_TITLE[`${info.sourceType}-${info.merchantCouponType}`]
					}
					return info
				})
				return list
			},
			pdRpx(e){
				return e.indexOf('rpx') == -1 ? (e.indexOf('%') == -1 ? e + 'rpx' : e) : e
			},
	  }
	};
</script>

<style lang="less" scoped>
	.coupList_block{
		.coupList_item{
			border-radius: 20rpx;
			box-sizing: border-box;margin-bottom: 22rpx;
			position: relative;padding-top: 10rpx;border-radius: 20rpx;
			overflow: hidden;padding: 10rpx 10rpx;
			image{
				width: 654rpx;height: 210rpx;border-radius: 20rpx;
				filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .38));
			}
			.text_colorRed{color: #FC495F;}
			.text_colorBlue{color: #2388F0;}
			.text_colorGrey{color: #999999;}
			.item-wrap-content {
			  position: absolute;z-index: 1;
			  width: 100%;top: 0;left: 0;bottom: 0;right: 0;
			  box-sizing: border-box;
				.amount {
				  position: absolute;left: 60rpx;transform: translate(0, -50%);
				  top: 50%;display: flex;align-items: baseline;
				}
				.unit {
				  font-size: 36rpx;font-weight: normal;line-height: 42px;
				}
				.money {
				  font-size: 52rpx;font-weight: 400;line-height: 84rpx;
				}
				.text {
				  position: absolute;right: 240rpx;
				  top: 50%;transform: translate(0, -50%);text-align: right;
				}
				.couponName {
				  font-size: 42rpx;font-weight: 400;line-height: 1;
				}
				.couponDate {
				  font-size: 20rpx;margin-top: 10rpx;
				}
			}
		}
	}
</style>